{#if showControls}
  {#each $classComparisons as comparison, i}
    <button on:click="set({classComparisonIndex: i})">{comparison.leftLabel} vs. {comparison.rightLabel}</button>
  {/each}
{/if}

<div style="display: grid; grid-auto-flow: column; grid-column-gap: 20px; grid-auto-columns: 1fr;">
  <div>
    <h4>“{$inceptionLabels[leftIndex]}”</h4>
    <div class="atlas">
      <ClassAtlas classFilter={leftIndex} {filterType} />
    </div>
  </div>
  <div>
    <h4>“{$inceptionLabels[rightIndex]}”</h4>
    <div class="atlas">
      <ClassAtlas classFilter={rightIndex} {filterType} />
    </div>
  </div>
</div>

<script>
export default {
  components: {
    ClassAtlas: "./ClassAtlas.html"
  },
  data() {
    return {
      classComparisonIndex: 0,
      showControls: true,
      filterType: "top"
    };
  },
  computed: {
    leftIndex: ({$classComparisons, classComparisonIndex}) =>  $classComparisons[classComparisonIndex].left,
    rightIndex: ({$classComparisons, classComparisonIndex}) => $classComparisons[classComparisonIndex].right,
  }
}
</script>

<style>
.figcaption {
  margin-top: 20px;
}
.figcaption b {
  text-transform: uppercase;
  margin-right: 8px;
}
h4 {
  margin-top: 0;
}
</style>